<style>
    div {
        position: absolute;
        top: 200px;
        /*div的y轴*/
        left: 150px;
        /*div的x轴*/
        width: 300px;
        height: 200px;
        background-color: rgb(22, 231, 50);
    }

    div:hover {
        cursor: move;
    }
</style>

<script>

    /*
     * 分析：
     * 获取鼠标实时移动的坐标；m_move_x,m_move_y
     * 鼠标按下时的坐标；m_down_x,m_down_y
     * div的坐标；dx,dy
     * 鼠标按下时，鼠标与div的偏移量；md_x,md_y
     * div的新坐标；ndx,ndy
     */

    var isDown = false;//记录鼠标状态
    var move_div;//要操作的div对象
    var m_move_x, m_move_y, m_down_x, m_down_y, dx, dy, md_x, md_y, ndx, ndy;

    //鼠标按下
    function down() {
        move_div = document.getElementById("move_div");
        isDown = true;

        //获取鼠标按下时坐标
        m_down_x = event.pageX;
        m_down_y = event.pageY;

        //获取div坐标
        dx = move_div.offsetLeft;
        dy = move_div.offsetTop;

        //获取鼠标与div偏移量
        md_x = m_down_x - dx;
        md_y = m_down_y - dy;
    }

    //鼠标移动
    function move() {
        move_div = document.getElementById("move_div");

        //实时更新div的坐标
        dx = move_div.offsetLeft;
        dy = move_div.offsetTop;

        //获取鼠标移动实时坐标
        m_move_x = event.pageX;
        m_move_y = event.pageY;

        //鼠标按下时移动才触发
        if (isDown) {
            //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量
            ndx = m_move_x - md_x;
            ndy = m_move_y - md_y;

            //把新div坐标值赋给div对象
            move_div.style.left = ndx + "px";
            move_div.style.top = ndy + "px";
        }
    }

    //鼠标释放
    function up() {
        isDown = false;
    }


</script>

</head>

<body>

    <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()">
    </div>

</body>